<template>
    <view class="pub_page pub_address_info pub_page_bg pub_header_padding">
        <pub-head headerName="address_info" :headerConfig="headerConfig"></pub-head>
        <div class="pub_address_info_box">
            <div class="pub_inputs">
                <div class="abox">
                    <div class="ali">
                        <div class="atitle">收货人</div>
                        <input class="ainput" type="text" placeholder="请输入" v-model="receiver" maxlength="10">
                    </div>
                    <div class="ali">
                        <div class="atitle">手机号码</div>
                        <input class="ainput" type="number" placeholder="请输入" v-model="phone" maxlength="11">
                    </div>
                    <div class="ali">
                        <div class="atitle">所在地区</div>
                        <picker class="apicker" @change="areaPickerChange" @columnchange="areaColumnPickerChange"
                            :value="areaIndex" :range="areaList" range-key="name" mode="multiSelector">
                            <input type="text" v-model="areaName" placeholder="请选择所在地区" disabled>
                            <div class="icon-font-basic icon-b-arrow-1-2"></div>
                        </picker>
                    </div>
                    <div class="ali">
                        <div class="atitle">详细地址</div>
                        <textarea class="atextarea" placeholder="请输入" :maxlength="-1" v-model="address"></textarea>
                    </div>
                </div>
            </div>
            <div class="def_div" @click="isDefault == 0 ? isDefault = 1 : isDefault = 0"><span class="icon-font-basic"
                    :class="isDefault == 1 ? 'icon-b-select-6' : 'icon-b-select-4'"></span>默认使用此地址</div>
            <div class="pub_btn" @click="toSubmit">保存收货地址</div>
        </div>
    </view>        </div>
        </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '',//标题栏内容
                left_type: 3,//左侧区域类型  0不出现  1文字  2图片  3返回按钮
            },

            areaData: [],//初始地址数据
            areaList: [],//选择器所需的地址数据
            areaIndex: [0, 0, 0],//选择器选择的key
            areaName: '',//选择器选择的name
            areaId: [0, 0, 0],//选择器选择的id

            address: "",
            id: "",
            isDefault: 0,
            receiver: "",
            phone: "",

            addInfo: ''
        };
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    onLoad(option) {
        this.addInfo = option.info ? JSON.parse(option.info) : '';
        this.headerConfig.title = this.addInfo == '' ? '新增收货地址' : '编辑收货地址';
        // console.log(this.addInfo);
        if (this.addInfo != '') {
            this.address = this.addInfo.address;
            this.id = this.addInfo.id;
            this.isDefault = this.addInfo.isDefault;
            this.receiver = this.addInfo.receiver;
            this.phone = this.addInfo.phone;
            this.areaName = this.addInfo.area;
            this.areaId = [this.addInfo.provinceId, this.addInfo.cityId, this.addInfo.regionId];
        }
        this.getArea();
    },
    methods: {
        async getArea() {
            const res = await this.$request.get('public/getArea', {});
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.areaData = res.result;
                if (this.addInfo != '') {
                    let index_0 = this.areaData.findIndex(li => {
                        return li.id == this.addInfo.provinceId;
                    })
                    let index_1 = 0;
                    let index_2 = 0;
                    if (index_0 != -1) {
                        index_1 = this.areaData[index_0].children.findIndex(li => {
                            return li.id == this.addInfo.cityId;
                        })
                        if (index_1 != -1) {
                            index_2 = this.areaData[index_0].children[index_1].children.findIndex(li => {
                                return li.id == this.addInfo.regionId;
                            })
                            index_2 = index_2 == -1 ? 0 : index_2;
                        } else {
                            index_1 = 0;
                        }
                    } else {
                        index_0 = 0;
                    }
                    this.areaIndex = [index_0, index_1, index_2];
                }
                this.dealArea();
            }
        },
        dealArea() {
            let chooseIndex = this.areaIndex;
            const chinaData = this.areaData;
            let provinceArr = chinaData.map(item => {
                return { name: item.name, id: item.id }
            })
            let cityArr = [];
            if (chinaData[chooseIndex[0]].children) {
                let children_0 = chinaData[chooseIndex[0]].children;
                cityArr = children_0.map(item => {
                    return { name: item.name, id: item.id }
                })
            }
            let regionArr = [];
            if (chinaData[chooseIndex[0]].children[chooseIndex[1]].children) {
                let children_1 = chinaData[chooseIndex[0]].children[chooseIndex[1]].children;
                regionArr = children_1.map(item => {
                    return { name: item.name, id: item.id }
                })
            }
            // console.log(provinceArr, cityArr, regionArr);
            this.areaList = [provinceArr, cityArr, regionArr];
            // console.log(this.areaList);
        },
        areaPickerChange(data) {
            console.log(data, this.areaIndex);
            let textArr = [];
            this.areaIndex = data.detail.value;
            this.areaIndex.forEach((li, key) => {
                textArr.push(this.areaList[key][li].name);
                this.areaId[key] = this.areaList[key][li].id;
            });
            // console.log(textArr);
            this.areaName = textArr.join("");
        },
        areaColumnPickerChange(data) {
            // console.log(data);
            if (data.detail.column < 2) {
                if (data.detail.column == 0) {
                    this.areaIndex[1] = 0;
                    this.areaIndex[2] = 0;
                }
                if (data.detail.column == 1) {
                    this.areaIndex[2] = 0;
                }
                this.areaIndex[data.detail.column] = data.detail.value;
                this.dealArea();
            }
        },
        toSubmit() {
            if (!this.receiver) {
                this.$comFun.toast('请输入收货人姓名');
                return;
              }
            if (this.receiver.length < 2) {
                this.$comFun.toast('姓名请至少输入2个字符');
                return;
            }
            if (!this.$comFun.ValidateMobile(this.phone)) {
                this.$comFun.toast('请输入正确的手机号码');
                return;
            }
            if (this.areaId[0] == 0) {
                this.$comFun.toast('请选择所在地区');
                return;
            }
            if (!this.address) {
                this.$comFun.toast('请输入详细地址');
                return;
            }
            this.sureSubmit();
        },
        async sureSubmit() {
            this.$comFun.openLoading();
            const res = await this.$request.post('address/updateAddress', {
                receiver: this.receiver,
                phone: this.phone,
                address: this.address,
                id: this.id,
                isDefault: this.isDefault,
                cityId: this.areaId[1],
                provinceId: this.areaId[0],
                regionId: this.areaId[2],
            });
            this.$comFun.closeLoading();
            this.$comFun.toast(res.message);
            if (res.code == 200) {
                uni.$emit('refreshAddressPage');
                setTimeout(() => {
                    this.$comFun.closeWin();
                }, 1000);
            }
        }
    },
};
</script>
@import "@/common/css/other.scss";<style lang="scss" scoped>
@import "@/common/css/other.scss";
</style>
